🔧 기본 CRA 설정과 CRA의 독릭적 파일 생성

CRA를 통해서 React 환경을 구축하게 되면 CRA의 독립적 환경이 구축된다. 따라서 중요한 패키지와 플러그인들을 지정한 특정 디렉토리에 설치를 미치고 pnpm의 workspace를 설정한다.

• CRA template TypeScript 설치

    pnpm create react-app your-project-name --template typescript
  

• Eslint(ver.8.22.0), Prettier 설치

  자동완성 동작 확인, 만약 동작하지 않는다면 모든 서버를 닫고 다시 에디터 창을 껐다 켜야한다.

    pnpm add -D prettier@^3.3.3 eslint@^8.22.0 @typescript-eslint/eslint-plugin@^5.18.0 @typescript-eslint/parser@^5.18.0 eslint-config-airbnb@^19.0.4 eslint-config-prettier@^9.1.0 eslint-import-resolver-typescript@^3.6.3 eslint-plugin-import@^2.31.0 eslint-plugin-jsx-a11y@^6.10.2 eslint-plugin-prefer-arrow@^1.2.3 eslint-plugin-prettier@^5.2.1 eslint-plugin-react@^7.37.2
  

• TailwindCSS, CVA 설치

  Eslint와 Prettier를 설치하고 실행해 본다. #22 해당 브렌치 참고

    pnpm add tailwindcss@latest postcss@latest autoprefixer@latest -D
    pnpm add class-variance-authority
    pnpm exec tailwindcss init
  

• react-router-dom 설치

  pnpm add @types/react-router-dom --dev은 TypeScript를 사용할 때 사용할 type을 제공 받기 위해 설치한다.

    pnpm add react-router-dom
    pnpm add @types/react-router-dom --dev
  

현재 까지의 디렉토리 구조

    
       TRENDGARAGE
        └── front
                ├── node_modules
                ├── public
                ├── src
                │        ├── Page
                │        ├── App.css
                │        ├── App.test.tsx
                │        ├── App.tsx
                │        ├── index.css
                │        ├── index.tsx
                │        ├── logo.svg
                │        ├── react-app-env.d.ts
                │        ├── reportWebVitals.ts
                │        └── setupTests.ts
                ├── .eslintrc
                ├── .gitignore
                ├── .prettierrc
                ├── package-lock.json
                ├── package.json
                ├── pnpm-lock.yaml
                ├── postcss.config.js
                ├── README.md
                ├── tailwind.config.js
                └── tsconfig.json
    
  

🛠Mono-repo 구현하기

front에서 root 디렉토리로 이동

• 📌npmrc 설정(여기서 pnp 방식으로 설정이 가능한다.)

  • node_modules 방식

      node-linker=hoisted
    

  • pnp 방식

      node-linker=pnp
    

• 📌package.json 루트에 생성하기

    pnpm init
  

• 📌workspace 설정

• package.json workspace 설정

      {
        "name": "trendgarage",
        "version": "1.0.0",
        "description": "",
        "main": "index.js",
        "workspaces": [
          "front"
        ],
        "scripts": {
          "test": "echo \"Error: no test specified\" && exit 1"
        },
        "keywords": [],
        "author": "",
        "license": "ISC",
        "packageManager": "pnpm@9.12.1+sha512.e5a7e52a4183a02d5931057f7a0dbff9d5e9ce3161e33fa68ae392125b79282a8a8a470a51dfc8a0ed86221442eb2fb57019b0990ed24fab519bf0e1bc5ccfc4"
      }
  

• pnpm-workspace.yaml

    packages:
      - "front"
  

• 루트에 front workspace 의존성들 설치

    cd ~/trendgarage  # 루트로 이동(및 확인)
    pnpm install  # 루트에서 실행하면, front의 의존성이 설치
  

• front 디렉토리에 있는 node_modules 삭제

    rm -rf node_modulse
  

  이후 pnpm run start로 정상 동작하는지 확인해본다.

현재 까지의 디렉토리 구조

    
       TRENDGARAGE
            ├── front
            │   ├── node_modules(bable-loader && cache)
            │   ├── public
            │   ├── src
            │   │       ├── Page
            │   │       └── 기타 파일들
            │   ├── .eslintrc
            │   ├── .gitignore
            │   ├── .prettierrc
            │   ├── package-lock.json
            │   ├── package.json
            │   ├── pnpm-lock.yaml
            │   ├── postcss.config.js
            │   ├── README.md
            │   ├── tailwind.config.js
            │   └── tsconfig.json
            ├── node_modules
            ├── .npmrc
            ├── package.json
            ├── pnpm-lock.yaml
            └── pnpm-workspace.yaml
    
  

root에 eslint와 prettier를 설치하지 않는 이유

• 이유는 CRA를 설치할 때 자동으로 eslint, 관련 규칙 플러그인들이 생성되기 때문에 패키지 충돌들이 일어나기 때문에 각 디렉토리에서 eslint와 같은 규칙들을 설정하는게 맞다고 판단이 되었다. 물론 webpack과 babel을 사용해서 직접 설정할 수 있지만 이러한 일렬의 과정들을 스킵하고 구현한다면 이와 같이 작업을 해야한다.

front 디렉토리에 node_modules가 생기는 이유

• 이론 상으로 보면 root에 node_modules를 의존하게 설정했는데 왜 front에 node_modules가 생성될까? 이유는 react가 동작하면서 발생되는 필요 babel-loader와 캐시들을 CRA로 생성한 디렉토리에서 관리하게끔 설정되어 있기 때문이다. 즉, CRA의 독립성으로 인한 자연스러운 생성과정이다.

  • root node_modules

    • root의 node_modules는 공유된 종속성을 포함하고 있으며 각각의 워크스페이스는 이 공유된 node_modules 폴더를 참조하게 된다. 각 워크스페이스(front 등)의 node_modules는 비어 있거나 필요한 종속성만 포함되며, 실제로 설치된 패키지는 루트 node_modules에 저장된다.

pnpm의 add와 install의 차이

pnpm add ~를 사용하면 패키지를 설치할 뿐만 아니라 설치한 패키지를 package.json의 dependencies나 devDependencies에 자동으로 추가하게 된다.
pnpm install ~은 패키지 추가를 위한 명령어가 아니며 package.json에 이미 정의된 의존성들을 설치하는 데 사용된다.
이전 pnpm으로 설치를 할때 add와 install을 혼용해서 사용했다. 이로 인해서 pnpm으로 eslint를 설치할 때 발생하는 문제들이 많았으며 이해가 되지 않는 package.json의 형태가 나타 났었다.